<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport"
	content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<c:import url="/includes/header.jsp"></c:import>
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/js/lib/jquery-tree/css/demo.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/js/lib/jquery-tree/css/zTreeStyle.css">
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/lib/jquery-tree/js/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/lib/jquery-tree/js/jquery.ztree.excheck-3.5.js"></script>
<title></title>
<style>
ul.ztree {
	margin-top: 10px;
	border: 0px solid;
	background: none;
	width: 500px;
	height: 500px;
	overflow-y: auto;
	overflow-x: auto;
}

.ztree * {
	font-size: 18px;
}

.ztree li a.curSelectedNode {
	background-color: rgb(91, 195, 227);
	/* color: black; */
	height: 30px;
	border: none;
	opacity: 0.8;
}

.ztree li {
	line-height: 30px
}

.ztree li span {
	color: rgb(92, 92, 92);
	line-height: 22px;
	height: 22px;
	width: 160px;
	text-align: left;
	position: relative;
	display: inline-block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ztree li span.button.ico_open {
	vertical-align: middle;
}

.ztree li span.button.ico_docu {
	vertical-align: middle;
}
</style>
</head>
<body>
	<div class="container">
		<div class="row">
			<div class="col-md-4"></div>
			<div class="col-md-4">
				<form class="form-horizontal" method="post" id="form">
					<input type="hidden" name="resourcesIds" value="" id="resourcesIds" />
					<div class="form-group">
						<label class="col-sm-3 control-label" for="content">角色:</label>
						<div class="col-sm-9">
							<input class="form-control" type="text" id="name" name="name"
								placeholder="输入用户名">
						</div>
					</div>

					<div class="form-group">
						<label class="col-sm-3 control-label" for="content">描述:</label>
						<div class="col-sm-9">
							<textarea class="form-control" id="remark" name="remark"
								placeholder="描述"></textarea>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-3 control-label" for="content">权限:</label>
						<div class="col-sm-9">
							<div style="overflow: auto;">
								<ul id="treeDemo" class="ztree"></ul>
							</div>
						</div>
					</div>
					<div class="col-md-4"></div>
					<div class="col-md-4" style="  margin-left: 50%;">
						<button type="button" class="btn btn-primary btn-sm">确定</button>
					</div>
					<div class="col-md-4"></div>
				</form>
			</div>
			<div class="col-md-4"></div>
		</div>
	</div>
</body>
</html>

<script type="text/javascript">
	$(function() {
		var validator = $("#form").validate({
			rules : {
				name : {
					required : true
				}
			},
			messages : {
				name : {
					required : "角色名必须填写"
				}
			}
		});

		$(".btn")
				.click(
						function() {
							var formState = validator.form();
							var chk_value = new Array();

							var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
							var nodes = treeObj.getCheckedNodes(true);
							var ids = new Array();
							$.each(nodes, function(n, value) {
								if (value) {
									chk_value.push(value.id);
								}
							});
							var resources = ids.join(",");

							$("#resourcesIds").val(chk_value.join());
							if (formState) {
								var href = "${pageContext.request.contextPath}/admin/role/getRole.do";
								$
										.ajax({
											url : "${pageContext.request.contextPath}/admin/role/saveRole.do",
											type : "post",
											dataType : "json",
											data : $("#form").serialize(),
											async : true,
											success : function(data) {
												if (data.code == "0") {
													bootbox
															.alert(
																	data.data,
																	function() {
																		window.location = href;
																	});

												} else {
													bootbox.alert("网络不稳定,添加失败");
												}
											},
											error : function() {
												bootbox.alert("网络不稳定,添加失败");
											}
										});
							}
						});

		var setting = {
			check : {
				enable : true,
				chkboxType : {
					"Y" : "ps",
					"N" : "ps"
				}

			},
			data : {
				simpleData : {
					enable : true,
					idKey : "id",
					pIdKey : "pId",
					rootPId : ""
				}
			}
		};

		var userId = $("#userId").val();
		var url = "${pageContext.request.contextPath}/admin/resource/tree.do";
		$.ajax({
			url : url,
			type : "post",
			dataType : "json",
			data : {
				"userId" : userId
			},
			async : true,
			success : function(data) {
				if (data.code == "0") {
					console.info(data.data);
					var zNodesTree = data.data;
					var zTree = $("#treeDemo")
					$.fn.zTree.init(zTree, setting, zNodesTree);
				}
			},
			error : function() {
				bootbox.alert("网络不稳定,保存失败");
			}
		});

	});
</script>